<template>
  <div class="simple-clock-button">
    <button 
      class="simple-btn" 
      :class="{ 'loading': loading }" 
      @click="handleClock" 
      :disabled="loading">
      {{ loading ? '打卡中...' : '今日打卡' }}
    </button>
  </div>
</template>

<script>
import { clockTask } from '@/api/task';

export default {
  name: 'SimpleClockButton',
  props: {
    taskId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    async handleClock() {
      if (this.loading) return;
      
      this.loading = true;
      try {
        const response = await clockTask(this.taskId);
        console.log('打卡响应:', response);
        
        if (response && response.code === 200) {
          if (response.data === true) {
            // 打卡成功
            alert('打卡成功！继续保持哦~');
            this.$emit('clock-success');
          } else {
            // 今日已打卡
            alert('您今天已经打过卡了，请24小时后再来。');
          }
        } else {
          alert('打卡失败，请稍后重试');
        }
      } catch (error) {
        console.error('打卡出错:', error);
        alert('打卡失败: ' + (error.message || '未知错误'));
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.simple-clock-button {
  margin: 16px 0;
}

.simple-btn {
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 120px;
}

.simple-btn:hover {
  background-color: #73d13d;
}

.simple-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.simple-btn:disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
}
</style> 